<template>
    <!-- 买家评价 -->
    <div class="evaluate">
      <!-- <p>买家评价 ({{tags.length}})</p> -->
      <p>买家评价 ({{length}})</p>
      <div class="evaluate-tags">
        <p>大家认为</p>
        <ul class="smart-evaluate">
          <!-- <li class="smart-evaluate-item" :class="changeTagIndex === index ? 'active' :''" v-for="(item,index) in tags.slice(0,6)" :key="item.id" @click="clickSmartTags(index,item.id)">{{item.key}}</li> -->
          <li class="smart-evaluate-item"  v-for="item in tags.slice(0,6)" :key="item.goodsId">{{item.key}}</li>
        </ul>
      </div>
    </div>
</template>

<script>
export default {
   props:{
    tags:{
      type:Array,
      default:() =>{
        return []
      }
    }
  },
  data () {
    return {
      changeTagIndex:0,
    }
  },
  mounted() {
  },
  methods: {
    //未来可能传递评论id给后端
    // clickSmartTags(index,id){
    //   this.changeTagIndex = index;
    //   this.$emit("sendTagHandler",id)
    // }
  },
  computed: {
    length() {
      return this.tags.length > 6 ? this.tags.length = 6 : this.tags.length;
    }
  },
  watch:{
  },
  beforeDestory() {
  }
}
</script>

<style scoped>
  /* 买家评价 */
  .evaluate{
    padding:23px 0 0 27px;
    margin-top:20px;
    box-sizing:border-box;
    color:#ffffff;
    font-size: 16px;
    border-radius:4px;
    background-color: #21232e;
    border:2px solid #383a43;
  }
  .evaluate-tags{
    display:flex;
    border-radius:4px;
    margin-top:20px;
    user-select:none;
  }
  .evaluate-tags p{
    width: 150px !important;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    white-space: nowrap;
  }
  .smart-evaluate{
    display:flex;
    flex-wrap:wrap;
  }
  .smart-evaluate .active{
    background-image: linear-gradient(to left,#0099ff,#00ccff);
  }
  .smart-evaluate-item{
    height:36px;
    line-height: 36px;
    padding:0 26px;
    margin:0 36px 20px 0;
    border-radius:4px;
    background-color: #41434f;
    white-space:nowrap;
    /* cursor:pointer; */
    transition:all .1s ease;
  }
  /* .smart-evaluate-item:hover{
    background-image: linear-gradient(to left,#0099ff,#00ccff);
  } */
</style>
